import { defineComponent, watch, shallowReactive,ref } from 'vue'
// 声明类型
const PropsType = {
  tips: {
    type: Number,
    default: 50,
    require: true
  },
  data:{
    type:Array,
    default:[
    ],
    require: true
  },
  colorObj: {
    type: Object,
    default: () => ({
      textStyle: "#fff",
      series: {
        color: [ 
          "rgba(114, 82, 204, 1)",
          "rgba(255,215,0, 1)",
          "rgba(34,139,34, 1)",
          "rgba(	0,206,209, 1)",
          "rgba(46, 229, 229, 1)",
        ],
        dataColor: {
          normal: "#03a9f4",
          shadowColor: "#97e2f5"
        }
      }
    })
  }
} as const

// 定义主体
export default defineComponent({
  props: PropsType,
  setup(props) {
    const chartRef = ref()
    // 配置项
    let options = shallowReactive({title:null,series:null,color:null})

    watch(
      () => props,
      (val: any) => {
        console.log(val,'1111111');
        
        options = {
          title: {
            show:false,
            text: val * 1 + "%",
            x: "center",
            y: "center",
            textStyle: {
              color: props.colorObj.textStyle,
              fontSize: 16
            }
          },
          color:[
            "rgba(114, 82, 204, 1)",
            "rgba(255,215,0, 1)",
            "rgba(34,139,34, 1)",
            "rgba(	0,206,209, 1)",
            "rgba(46, 229, 229, 1)",
          ],
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: ['50%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 0
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: false,
                  fontSize: 40,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: props.data
            }
          ]
        }
        // 手动触发更新
        if (chartRef.value) {
          // 通过初始化参数打入数据
          chartRef.value.initChart(options,true)
        }
      },
      {
        immediate: true,
        deep: true
      }
    )

    return () => {
      const height = "200px"
      const width = "200px"

      return <div>
        <echart ref={chartRef} class="mr-auto" options={options} height={height} width={width} />
      </div>
    }
  }
})

